<template>
	<view class="contents">
		<navbar title='商家入驻'>
		</navbar>
		<view class="content">
			<view class="ruview">
				<text class="tishi">请填写商户本人的相关信息</text>
				<view class="aditem">
					<text class="addname">真实姓名</text>
					<u-input style="flex: 1;" v-model="newformData.realname" type="text" placeholder='请输入' />
				</view>
				<view class="aditem">
					<text class="addname">手机号</text>
					<u-input style="flex: 1;" v-model="newformData.mobile" type="text" placeholder='请输入' />
				</view>
				<view class="aditem">
					<text class="addname">证件号码</text>
					<u-input style="flex: 1;" v-model="newformData.sfz_code" type="text" placeholder='请输入' />
				</view>
			</view>
			<view class="addtuan">
				<view class="aditem chuantu">
					<text class="addname">上传证件照</text>
					<text class="chuanmiao">（请务必上传本人证件照，生活照、艺术照将会被驳回）</text>
					<view class="tuview">
						<view class="renzhao" @click.stop="upload(4)">
							<image class="img_zm" @click.stop="getyulan(ossThree(newformData.sfz_image_a))" v-if="newformData.sfz_image_a" :src="ossThree(newformData.sfz_image_a)" mode="" />
							<image class="img_zm" v-else src="@/pages_client/static/mine/img_zm.png" mode="" />
							<text class="chuanrenname">点击上传身份证人像面</text>
						</view>
						<view class="renzhao" @click.stop="upload(5)">
							<image class="img_zm" @click.stop="getyulan(ossThree(newformData.sfz_image_b))" v-if="newformData.sfz_image_b" :src="ossThree(newformData.sfz_image_b)" mode="" />
							<image class="img_zm" v-else src="@/pages_client/static/mine/img_bm.png" mode="" />
							<text class="chuanrenname">点击上传身份国旗面</text>
						</view>
					</view>
					<text class="bzhun">上传标准</text>
					<view class="bzitem">
						<view class="itemsz">
							<image class="img_1" src="@/pages_client/static/mine/img_1.png" mode="" />
							<view class="jieshi">
								<image class="icon_zq" src="@/pages_client/static/mine/icon_zq.png" mode="" />
								<text>标准</text>
							</view>
						</view>
						<view class="itemsz">
							<image class="img_1" src="@/pages_client/static/mine/img_2.png" mode="" />
							<view class="jieshi">
								<image class="icon_zq" src="@/pages_client/static/mine/icon_cw.png" mode="" />
								<text>边框缺失</text>
							</view>
						</view>
						<view class="itemsz">
							<image class="img_1" src="@/pages_client/static/mine/img_3.png" mode="" />
							<view class="jieshi">
								<image class="icon_zq" src="@/pages_client/static/mine/icon_cw.png" mode="" />
								<text>照片模糊</text>
							</view>
						</view>
						<view class="itemsz">
							<image class="img_1" src="@/pages_client/static/mine/img_4.png" mode="" />
							<view class="jieshi">
								<image class="icon_zq" src="@/pages_client/static/mine/icon_cw.png" mode="" />
								<text>闪光强烈</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ruview">
				<text class="tishi">商户银行账户信息</text>
				<view class="aditem">
					<text class="addname">开户行</text>
					<u-input style="flex: 1;" v-model="newformData.bank_open_name" type="text" placeholder='请输入' />
				</view>
				<view class="aditem">
					<text class="addname">银行卡号</text>
					<u-input style="flex: 1;" v-model="newformData.bank_code" type="text" placeholder='请输入' />
				</view>
				<view class="aditem">
					<text class="addname">所属银行</text>
					<u-input style="flex: 1;" v-model="newformData.bank_name" type="text" placeholder='请输入' />
				</view>
				<view class="aditem">
					<text class="addname">银行预留手机号</text>
					<u-input style="flex: 1;" v-model="newformData.bank_mobile" type="text" placeholder='请输入' />
				</view>
			</view>
			<view class="botview">
				<view class="tjia" @click="getnext">提交</view>
			</view>
		</view>

	</view>
</template>

<script>
 import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				newformData:{
					realname:'',
					sfz_image_a:'',//身份证正面
					sfz_image_b:'',//身份证反面
					sfz_code:'',
					mobile:'',
					bank_open_name:'',//开户行
					bank_name:'',//银行
					bank_code:'',//银行卡号
					bank_mobile:'',
				},
				formData:{

				},
				name:'',
				updatetype:4
			}
		},
		onLoad(option) {
			if(option.formData){
				this.formData = JSON.parse(option.formData)
				// console.log(this.newformData)
				if(this.formData.id){
					this.huixian()
				}else{
					this.newformData = this.mergeObjects(this.newformData,this.formData)
				}
				
			}
		},
		onShow() {
		},
		methods: {
			async huixian(){
				let res = await this.$u.api.getApply({
					shop_id:this.formData.id
				});
				this.newformData = this.assignIfEqual(this.newformData, res);
				
				this.newformData = this.mergeObjects(this.newformData,this.formData)
				console.log(this.newformData)
			},
			assignIfEqual(target, source) {
				for (const key in source) {
					if (source.hasOwnProperty(key) && target.hasOwnProperty(key)) {
					target[key] = source[key];
					}
				}
				return target;
			},
			mergeObjects(target, source) {
				return Object.assign({}, target, source);
			},
			upload(e) {
				this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token':uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						if(JSON.parse(uploadFileRes.data).code == 1){
							if(that.updatetype == 4){
								that.newformData.sfz_image_a = JSON.parse(uploadFileRes.data).data.url
							}else if(that.updatetype == 5){
								that.newformData.sfz_image_b = JSON.parse(uploadFileRes.data).data.url
							}
							
						}else{
							that.$u.toast(JSON.parse(uploadFileRes.data).msg);
						}
						// that.getinfo()
					}
				});
			},
			getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
			async getnext() {
				let status = true
				let formData = this.newformData
				const result = this.checkObjectEmpty(formData);
				if(!result){
					if(formData.id){
						let res = await this.$u.api.shopedit(formData);
						this.$u.toast("编辑成功");
						setTimeout(() => {
							uni.switchTab({ url: '/pages/tabbar/My',animationType:'slide-in-right' })
						}, 1000);
					}else{
						let res = await this.$u.api.apply(formData);
						this.$u.toast("申请成功");
						setTimeout(() => {
							uni.switchTab({ url: '/pages/tabbar/My',animationType:'slide-in-right' })
						}, 1000);
					}
					
				}
				
				// this.navrouter("/pages_client/mine/StoreEntryTwo?formData="+JSON.stringify(formData));
			},
			checkObjectEmpty(obj) {//检测是否为空
				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						const value = obj[key];
						if(key == 'id'||key == 'shop_id'){
							return;
						}
						if (value === null || value === undefined || value === "") {
							uni.showToast({
								title: `请完善信息`,
								icon: 'none'
							});
							return true; // 只要有一个为空就返回true
						}
					}
				}
				return false; // 所有属性都不为空则返回false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f9f9f9;
	}
	.content{
		background-color: #f9f9f9;
		min-height: 100vh;
		padding-bottom: 130rpx;
		padding-top: 20rpx;
		.ruview{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 10rpx 30rpx 8rpx;
			display: flex;
			flex-direction: column;
			min-height: 100rpx;
			margin: 0 30rpx 25rpx;
			.tishi{
				font-weight: 500;
				font-size: 26rpx;
				color: #F34343;
				display: block;
				margin-top: 20rpx;
			}
			.aditem{
                border-bottom: 1rpx solid #eee;
				padding: 20rpx 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                // min-height: 100rpx;

                .addname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #333333;
                    display: inline-block;
					margin-right: 20rpx;
                    min-width: 120rpx;
                }
			}	
			.aditem:last-child{
				border-bottom: none;
			}
		}
		.addtuan{
            display: flex;
            flex-direction: column;
            padding: 0 30rpx;
            .aditem{
                background: #FFFFFF;
                border-radius: 20rpx;
                padding: 10rpx 30rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 25rpx;
                min-height: 100rpx;

                .addname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #333333;
                    display: inline-block;
                    min-width: 120rpx;
                }
                .comm_icon_next{
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: auto;
                }
            }
			.chuantu{
				flex-direction: column;
				align-items: flex-start;
				padding: 25rpx 30rpx;
				.chuanmiao{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					display: block;
					margin: 10rpx 0 20rpx;
				}
			}
			.tuview{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: 100%;
				.tuitem{
					margin: 0 30rpx 0 0;
					width: 160rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					position: relative;
					.icon_zp{
						width: 100%;
						height: 100%;
						position: absolute;
					}
					text{
						font-weight: 400;
						font-size: 24rpx;
						color: #525357;
						position: relative;
						margin-top: 80rpx;
					}
					.tuimg{
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.dianpu{
					width: 320rpx;
					height: 220rpx;
					text{
						margin-top: 140rpx;
					}
				}
				.renzhao{
					width: 48%;
					padding: 10rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					.img_zm{
						width: 100%;
						height: 190rpx;
						position: relative;
					}
					.chuanrenname{
						display: block;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #525357;
						margin-top: 30rpx;
						margin-bottom: 20rpx;
					}
				}
				.tuchuan{
					.icon_zp{
						position: absolute;
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
						margin-bottom: 0;
					}
				}
			}
			.bzhun{
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				display: block;
				margin: 30rpx 0;
			}
			.bzitem{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				position: relative;
				.itemsz{
					width: 24%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.img_1{
						width: 142rpx;
						height: 90rpx;
						margin-bottom: 10rpx;
					}
					.jieshi{
						display: flex;
						flex-direction: row;
						align-items: center;
						.icon_zq{
							width: 24rpx;
							height: 24rpx;
							margin-right: 7rpx;
						}
						text{
							font-weight: 500;
							font-size: 20rpx;
							color: #333333;
						}
					}
				}
			}

        }
	}
	.botview{
		position: fixed;
		height: 120rpx;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		z-index: 10;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		.tjia{
			width: 100%;
			height: 90rpx;
			background: #52443B;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
